<template>
  <div>
    <div style="background: #fff">
      <!-- 导航 -->
      <div class="navs rongqi1280">
        <div style="padding: 40px 0; display: flex; align-items: center">
          <div class="ydl"><span>优秀案例分享平台</span></div>
          <div style="width: 1040px" class="cdl">
            <div>
              <span @click="Go('/')">首页</span>
              <span @click="Go('/Liuyan')">留言</span>
              <span @click="Go('/Gywm')">关于我们</span>
              <span @click="ZWKF">课堂实践</span>
              <span @click="ZWKF">课后作业</span>
              <span @click="Go('/echarts')">数据中心</span>
            </div>
            <div class="flex items_center">
              <div style="font-size: 24px; font-weight: bold; color: #333">
                {{ data.isUsername }}
              </div>
              <el-button
                style="
                  width: 60px;
                  height: 40px;
                  color: #fff;
                  margin-left: 30px;
                "
                color="#279c55"
                @click="tuichu"
                >退出</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="mains">
        <!-- 轮播图 -->
        <div class="rongqi1280 banners" style="margin-bottom: 40px">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item>
              <img
                style="width: 100%; height: 100%"
                src="../assets/banner1.jpg"
                alt="轮播图"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                style="width: 100%; height: 100%"
                src="../assets/banner2.jpg"
                alt="轮播图"
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                style="width: 100%; height: 100%"
                src="../assets/banner3.jpg"
                alt="轮播图"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 主体 -->
        <router-view></router-view>
        <div style="width: 100%; height: 100px"></div>
        <!-- 底部 -->
        <div class="footers">
          <div
            class="rongqi1280"
            style="display: flex; position: relative; flex-direction: column"
          >
            <div class="foot_item">
              <span>优秀案例|</span>
              <span>课堂分享|</span>
              <span>在线留言</span>
            </div>
            <div class="foot_item">
              <span>2025@zjw版权所有</span>
            </div>
            <div class="foot_item">谢谢观看</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let data = reactive({
  wztitle: "优秀案例分享",
  isUsername: "",
});
onMounted(() => {
  if (localStorage.getItem("USERNAME")) {
    data.isUsername = localStorage.getItem("USERNAME");
  }
});
// 跳转
let Go = (url) => {
  router.push(url);
};
// 暂未开放
let ZWKF = () => {
  ElMessage({
    type: "info",
    message: "暂未开放",
  });
};
// 退出
let tuichu = () => {
  localStorage.removeItem("USERNAME");
  ElMessage({
    type: "success",
    message: "退出成功",
  });
  setTimeout(() => {
    router.push({
      path: "/Login",
    });
  }, 1500);
};
</script>

<style scoped>
.dingbu {
  width: 100%;
  background: #279c55;
  height: 300px;
}

.dingbu .headers {
  padding: 30px 0 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/deep/ .el-carousel__container {
  height: 300px;
}

.el-carousel__item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* color: #475669;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0; */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.mains {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* margin-top: -200px; */
  /* background: #f1f1f1; */
}

.navs {
  display: flex;
  justify-content: center;
}

.qdl {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #929292;
  transition: all 0.3s;
  cursor: pointer;
  margin-right: 40px;
}

.qdl:hover {
  color: #333;
  font-weight: bold;
}

.ydl {
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
  font-weight: bold;
  transition: all 0.3s;
  cursor: pointer;
  margin-right: 40px;
}

.ydl:hover {
  color: #279c55;
}

.active_ {
  background: #333;
  color: #fff;
}

.list_ {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 2px;
  background: #fff;
  min-height: 400px;
}

.footers {
  width: 100%;
  height: 200px;
  background: #333;
  color: #929292;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.foot_item {
  padding: 6px 0;
}

.navs .el-dropdown-menu__item,
.el-menu-item {
  padding: 0 40px;
  margin-left: 20px;
}
.cdl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cdl span {
  font-size: 16px;
  margin-left: 24px;
  cursor: pointer;
}
.cdl span:hover {
  color: #279c55;
}
</style>
